import React, { useEffect, useState,} from 'react'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.less'
import { Space, Swiper, Toast } from 'antd-mobile'
import { SoundOutline, SearchOutline, GiftOutline } from 'antd-mobile-icons'
import 'animate.css';
import Goods from '../../comopnents/Goods'
import {
  getSwiperData,
  getBrandData,
  getActiveData,
  getHotData,
  getNewData,
  getLikeData
} from '@/utils/home'
//接口
interface brandType {
  id: string
  name: string
  icon: string
}
interface activeType {
  name: string
  recommendId: string
  price: number
  promotionPrice: number
  productId:string
}
interface hotType {
  id: string
  name: string
  pic: string
  price?: number
}
export default function Home() {
  //轮播图数据
  const [swiperList, setSwiperList] = useState([])
  //导航栏数据
  const [brandList, setBrandList] = useState([])
  //限时活动数据
  const [activeList, setActiveList] = useState([])
  //热门推荐数据
  const [hotList, setHotList] = useState([])
  //获取新品数据
  const [newList, setNewList] = useState([])
  //猜你喜欢数据
  const [likeList, setLikeList] = useState([])
  //获取轮播列表
  const getSwiperList = async () => {
    let res: resType = await getSwiperData()
    console.log(res);
    if (res.code === 20000) {
      setSwiperList(res.data.items)
    }
  }
  //轮播项
  const items = swiperList.map((item: ({ id: string, pic: string })) => (
    <Swiper.Item key={item.id}>
      <div
        className={styles.content}>
        <img src={item.pic} alt="" />
      </div>
    </Swiper.Item>
  ))
  //获取导航栏数据
  const getBrandList = async () => {
    let res: resType = await getBrandData()
    console.log(res);
    if (res.code === 20000) {
      setBrandList(res.data.category.children)
    }
  }
  //导航栏
  const brandItems = brandList.map((item: brandType) => (
    <div key={item.id} className={styles.brand_item} onClick={() => cateDetail(item.id)}>
      <img src={item.icon} alt="" style={{objectFit:"cover"}}/>
      <p>{item.name}</p>
    </div>
  ))
  //获取限时活动数据
  const getActiveList = async () => {
    let res: resType = await getActiveData()
    console.log("gfdgfgsds",res);
    if (res.code === 20000) {
      setActiveList(res.data.items)
    }
  }
  //限时活动项
  const activeItems = activeList.map((item: activeType) => {
    return <Swiper.Item key={item.recommendId} onClick={() => productDetail(item.productId)}>
      <div
        className={styles.active_item}>
        <p>{item.name}</p>
        <div className={styles.active_price}>
          <p style={{ textDecoration: 'line-through' }}>{item.price}元</p>
          <p style={{ color: 'red' }}>现价{item.promotionPrice}元</p>
        </div>
      </div>
    </Swiper.Item>

  })
  //获取热门推荐数据
  const getHotList = async () => {
    let res: resType = await getHotData()
    // console.log("hotData", res.data.items);
    if (res.code === 20000) {
      setHotList(res.data.items)
    }
  }
  //热门数据项
  const hotItems = hotList.map((item: hotType) => (
    <Swiper.Item key={item.id} className={styles.hot_List} onClick={() => productDetail(item.id)}>
      <div
        style={{textAlign:'center'}}>
        <img src={item.pic} alt="" />
        <p>{item.name}</p>
      </div>
    </Swiper.Item>
  ))
  //新品数据
  const getNewList = async () => {
    let res: resType = await getNewData()
    console.log("newData", res.data.productList.slice(0, 8));
    if (res.code === 20000) {
      setNewList(res.data.productList)
    }
  }
  //新品数据项
  const newItems = newList.map((item: hotType) => {
    return (
      <div className={styles.new_item} key={item.id} onClick={() => productDetail(item.id)}>
        <img src={item.pic} alt="" />
        <div className={styles.new_box}>
          <p>{item.name}</p>
          <p>价格：{item.price}</p>
        </div>
      </div>
    )
  })
  //猜你喜欢数据
  const getLikeList = async () => {
    let res: resType = await getLikeData()
    console.log("likeData", res);
    if (res.code === 20000) {
      setLikeList(res.data.items)
    }
  }
  useEffect(() => {
    getLikeList()
  }, [])

  const navegite = useNavigate()
  //导航栏的点击事件
  const cateDetail = (val: string) => {
    // console.log('ok');
    navegite('/cate/catelist?productId=' + val)
  }
  //跳转商品页面详情
  const productDetail = (id: string) => {
    navegite(`/cate/goodsdetail?productId=${id}`)
    console.log(id);
  }
  //跳转到购物车
  const cardetail=()=>{
    navegite(`/my/car`)
  }
  useEffect(() => {
    getSwiperList()
    getBrandList()
    getActiveList()
    getHotList()
    getNewList()
  }, [])
  return (
    <div className={styles.box}>
      <div className={styles.tops}>
        <Space>
          <SearchOutline />
          <GiftOutline  onClick={cardetail}/>
        </Space>
      </div>
      {swiperList.length !== 0 &&
        <Swiper loop className={styles.swiper} autoplay={true}>{items}</Swiper>
      }
      <div className={styles.brand_list}>{brandItems}</div>
      <div className={styles.limit_active}>
        <SoundOutline color='#FFA500' className={styles.icon} />
        <p style={{ color: '#FFA500', fontWeight: 'bolder' }} >限时活动:</p>
        {activeList.length !== 0 &&
          <Swiper loop
            autoplay={true}
            direction="vertical"
            indicator={() => null}
            className={styles.actSwiper}>
            {activeItems}
          </Swiper>
        }

      </div>
      {/*热门推荐*/}
      <div className={styles.hot_goods}>
        <h3>热门推荐</h3>
        {hotList.length!==0 &&
         <Swiper loop
          autoplay={true}
          slideSize={33.3}
          className={styles.hot_swiper}
          indicator={() => null}
        >{hotItems}</Swiper>
        }
       
      </div>
      {/* 新品推荐 */}
      <div className={styles.new_goods}>
        <h3>新品推荐</h3>
        <div className={styles.new_list}>
          {newItems}
        </div>
      </div>
      <div className={styles.new_goods}>
        <h3>猜你喜欢</h3>
        <Goods likelist={likeList}></Goods>
      </div>
    </div>
  )
}
